<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03.canvas状态</title>
</head>
<body>
<canvas id="canvas">

</canvas>

<script>
    window.onload = function () {
        console.log('onload');
        //获取canvas节点对象
        var canvasRef = document.querySelector('canvas');

        canvasRef.width = 600;
        canvasRef.height = 600;
        canvasRef.style.border = '1px solid #000'
        //获取canvas上下文对象
        var ctx = canvasRef.getContext('2d');
        //线宽20
        ctx.lineWidth = 20;
        ctx.moveTo(100,100);
        ctx.lineTo(300,100);
        ctx.strokeStyle = ' red';
        ctx.stroke();

        //开启新状态
        ctx.beginPath();
        ctx.lineWidth = 30;
        ctx.moveTo(100,200);
        ctx.lineTo(300,200);
        ctx.strokeStyle = 'green';
        ctx.stroke();


        //不开启新状态的话
        //将会继承最近的新状态的样式
        ctx.beginPath();
        ctx.lineWidth = 40;
        ctx.moveTo(100,300);
        ctx.lineTo(300,300);
        ctx.strokeStyle = 'pink';
        ctx.stroke();
    }
</script>
</body>
</html>
